 /**
 * 引导式访问工具
 * 用于为新用户提供应用功能引导
 */

// 引导配置
const guideConfig = {
    // 首页引导配置
    home: [
      {
        element: '.map-container',
        title: '地图视图',
        content: '这是地图视图，您可以在这里查看附近的航空设施和服务',
        position: 'bottom'
      },
      {
        element: '.sliding-content',
        title: '功能区域',
        content: '上下滑动这里可以查看更多功能和信息',
        position: 'top'
      },
      {
        element: '.modules-section',
        title: '功能服务',
        content: '这里提供了各种航空相关服务，点击即可使用',
        position: 'top'
      },
      {
        element: '.news-section',
        title: '行业资讯',
        content: '这里展示最新的航空行业资讯',
        position: 'top'
      }
    ],
    
    // 飞机购买页引导配置
    airplane: [
      {
        element: '.header-info',
        title: '项目介绍',
        content: '这里介绍了我们的飞机共享项目',
        position: 'bottom'
      },
      {
        element: '.dividend-card',
        title: '股东收益',
        content: '成为股东后，您可以在这里查看和领取分红',
        position: 'bottom'
      },
      {
        element: '.brand-card',
        title: '投资项目',
        content: '点击这里查看项目详情并进行投资',
        position: 'top'
      }
    ],
    
    // 营地建设页引导配置
    camp: [
      {
        element: '.camp-card',
        title: '我的营地',
        content: '这里展示了您的营地信息和收益',
        position: 'bottom'
      },
      {
        element: '.task-section',
        title: '建设任务',
        content: '完成这些任务可以获得经验值，提升营地等级',
        position: 'top'
      },
      {
        element: '.tabs',
        title: '功能切换',
        content: '点击这里可以切换到排行榜查看其他用户的营地情况',
        position: 'bottom'
      }
    ],
    
    // 视频页引导配置
    video: [
      {
        element: '.tab-bar',
        title: '视频分类',
        content: '点击这里可以切换不同类型的视频',
        position: 'bottom'
      },
      {
        element: '.video-card',
        title: '视频内容',
        content: '点击视频卡片可以观看完整视频',
        position: 'top'
      },
      {
        element: '.video-likes',
        title: '互动功能',
        content: '您可以对喜欢的视频进行点赞',
        position: 'left'
      }
    ],
    
    // 个人中心页引导配置
    my: [
      {
        element: '.user-info',
        title: '个人信息',
        content: '这里展示了您的基本信息',
        position: 'bottom'
      },
      {
        element: '.vip-section',
        title: '会员特权',
        content: '点击这里可以开通会员，享受更多权益',
        position: 'bottom'
      },
      {
        element: '.order-icons',
        title: '订单管理',
        content: '这里可以管理您的所有订单',
        position: 'top'
      },
      {
        element: '.service-grid',
        title: '我的服务',
        content: '这里提供了各种个人服务功能',
        position: 'top'
      }
    ]
  }
  
  /**
   * 创建引导遮罩层
   * @param {Object} step 引导步骤配置
   * @param {Function} onNext 下一步回调
   * @param {Function} onClose 关闭回调
   */
  function createGuideMask(step, onNext, onClose) {
    // 创建遮罩容器
    const maskContainer = document.createElement('div')
    maskContainer.className = 'guide-mask-container'
    maskContainer.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.7);
      z-index: 9999;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: opacity 0.3s;
    `
    
    // 获取目标元素
    const targetElement = document.querySelector(step.element)
    if (!targetElement) {
      console.error(`引导目标元素不存在: ${step.element}`)
      onNext()
      return null
    }
    
    // 获取目标元素位置
    const rect = targetElement.getBoundingClientRect()
    
    // 创建高亮区域
    const highlight = document.createElement('div')
    highlight.className = 'guide-highlight'
    highlight.style.cssText = `
      position: absolute;
      top: ${rect.top}px;
      left: ${rect.left}px;
      width: ${rect.width}px;
      height: ${rect.height}px;
      border-radius: 4px;
      box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
      z-index: 10000;
    `
    
    // 创建提示框
    const tooltip = document.createElement('div')
    tooltip.className = 'guide-tooltip'
    tooltip.style.cssText = `
      position: absolute;
      background-color: white;
      border-radius: 8px;
      padding: 15px;
      width: 80%;
      max-width: 300px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      z-index: 10001;
    `
    
    // 设置提示框位置
    let tooltipTop, tooltipLeft
    
    switch (step.position) {
      case 'top':
        tooltipTop = rect.top - 120
        tooltipLeft = rect.left + rect.width / 2 - 150
        break
      case 'bottom':
        tooltipTop = rect.bottom + 20
        tooltipLeft = rect.left + rect.width / 2 - 150
        break
      case 'left':
        tooltipTop = rect.top + rect.height / 2 - 60
        tooltipLeft = rect.left - 320
        break
      case 'right':
        tooltipTop = rect.top + rect.height / 2 - 60
        tooltipLeft = rect.right + 20
        break
      default:
        tooltipTop = rect.bottom + 20
        tooltipLeft = rect.left + rect.width / 2 - 150
    }
    
    // 确保提示框在可视区域内
    tooltipTop = Math.max(10, Math.min(window.innerHeight - 120, tooltipTop))
    tooltipLeft = Math.max(10, Math.min(window.innerWidth - 320, tooltipLeft))
    
    tooltip.style.top = `${tooltipTop}px`
    tooltip.style.left = `${tooltipLeft}px`
    
    // 添加提示框内容
    tooltip.innerHTML = `
      <h3 style="margin: 0 0 10px; font-size: 16px; color: #0B3D91;">${step.title}</h3>
      <p style="margin: 0 0 15px; font-size: 14px; color: #333;">${step.content}</p>
      <div style="display: flex; justify-content: space-between;">
        <button class="guide-skip-btn" style="padding: 8px 12px; background: #f5f5f5; border: none; border-radius: 4px; color: #666;">跳过</button>
        <button class="guide-next-btn" style="padding: 8px 12px; background: #0B3D91; border: none; border-radius: 4px; color: white;">下一步</button>
      </div>
    `
    
    // 添加到文档
    document.body.appendChild(maskContainer)
    maskContainer.appendChild(highlight)
    maskContainer.appendChild(tooltip)
    
    // 绑定事件
    const skipBtn = tooltip.querySelector('.guide-skip-btn')
    const nextBtn = tooltip.querySelector('.guide-next-btn')
    
    skipBtn.addEventListener('click', () => {
      maskContainer.remove()
      onClose()
    })
    
    nextBtn.addEventListener('click', () => {
      maskContainer.remove()
      onNext()
    })
    
    return maskContainer
  }
  
  /**
   * 启动引导流程
   * @param {string} page 页面名称
   */
  function startGuide(page) {
    // 检查是否已经完成引导
    const guideDone = localStorage.getItem(`guide_${page}_done`)
    if (guideDone === 'true') {
      return
    }
    
    // 获取页面引导配置
    const steps = guideConfig[page]
    if (!steps || steps.length === 0) {
      console.error(`未找到页面 ${page} 的引导配置`)
      return
    }
    
    let currentStep = 0
    
    // 显示当前步骤
    function showStep() {
      if (currentStep >= steps.length) {
        // 引导完成
        localStorage.setItem(`guide_${page}_done`, 'true')
        return
      }
      
      createGuideMask(
        steps[currentStep],
        () => {
          // 下一步
          currentStep++
          showStep()
        },
        () => {
          // 关闭引导
          localStorage.setItem(`guide_${page}_done`, 'true')
        }
      )
    }
    
    // 延迟启动引导，确保页面元素已加载
    setTimeout(showStep, 1000)
  }
  
  /**
   * 重置引导状态
   * @param {string} page 页面名称，如果不提供则重置所有页面
   */
  function resetGuide(page) {
    if (page) {
      localStorage.removeItem(`guide_${page}_done`)
    } else {
      Object.keys(guideConfig).forEach(key => {
        localStorage.removeItem(`guide_${key}_done`)
      })
    }
  }
  
  export default {
    startGuide,
    resetGuide
  }